<template>
	<el-container>
		<el-header>
			<div class="left-panel"></div>
			<div class="right-panel">
				<div class="right-panel-search">
                    <el-select v-model="search.customer_id" placeholder="请选择" filterable clearable @change="getData">
                        <el-option v-for="item in clientList" :key="item.id" :label="item.customer_name" :value="item.id"></el-option>
                    </el-select>
					<el-button type="primary" icon="el-icon-search" @click="getData"></el-button>
					<el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :data="data" row-key="id" @selection-change="selectionChange" hidePagination show-summary>
				<el-table-column type="selection" width="50" align="center"></el-table-column>
				<el-table-column label="周间" prop="week" align="center"></el-table-column>
				<el-table-column label="期初应收" prop="start_money" align="center"></el-table-column>
				<el-table-column label="本期应收" prop="money" align="center"></el-table-column>
				<el-table-column label="本期已收" prop="pay_money" align="center"></el-table-column>
				<el-table-column label="期末应收(月)" prop="end_money" align="center"></el-table-column>
				<el-table-column label="应收对比" prop="collect_contrast" align="center">
                    <template #default="scope">
                        <div :style="'color:' + ( scope.row.collect_contrast < 0 ? '#F00' : '')">
                            <el-icon v-if="scope.row.collect_contrast < 0"><el-icon-CaretBottom /></el-icon>
                            <el-icon v-else><el-icon-CaretTop /></el-icon>
                            {{scope.row.collect_contrast}}%</div>
                    </template>
                </el-table-column>
				<el-table-column label="已收对比" prop="pay_contrast" align="center">
                    <template #default="scope">
                        <div :style="'color:' + ( scope.row.pay_contrast < 0 ? '#F00' : '')">
                            <el-icon v-if="scope.row.pay_contrast < 0"><el-icon-CaretBottom /></el-icon>
                            <el-icon v-else><el-icon-CaretTop /></el-icon>
                            {{scope.row.pay_contrast}}%</div>
                    </template>
                </el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>

<script>

	export default {
		name: 'dept',
		components: {
		},
		data() {
			return {
				apiObj: this.$API.table.weekincrease,
				clientList:[],
                search: {
                    customer_id: null,
                },
                data: [],
			}
		},
        mounted() {
            this.getData()
            this.getClient()
        },
		methods: {
			// 数据列表
            async getData(){
                var res = await this.$API.table.weekincrease.post({customer_id:this.search.customer_id})
                this.data = res.data
            },
            // 客户列表
            async getClient(){
                var res = await this.$API.client.client.all.get();
                this.clientList = res.data
            },
			upsearch(){
				this.$refs.table.upData(this.search)
			},
            refresh() {
                for (const key in this.search) {
                    this.search[key] = null;
                }
                this.getData()
            },
		}
	}
</script>

<style>
</style>
